import React from 'react';
import { Divider, List, Tag } from 'antd';
import { ArticleType } from '@/domains/article';
import styles from './index.less';

interface Props {
  data: ArticleType[];
  loading?: boolean;
  itemClick?: (item: ArticleType) => void;
}

const ArticleList: React.FC<Props> = ({ data, loading, itemClick }) => (
  <List
    className={styles.articleList}
    size="large"
    rowKey="time"
    itemLayout="vertical"
    loading={loading}
    dataSource={data}
    pagination={{ size: 'small' }}
    renderItem={(item: ArticleType) => (
      <List.Item key={item.time}>
        <List.Item.Meta title={<a onClick={() => itemClick && itemClick(item)}>{item.title}</a>} />
        <div className={styles.listContent}>
          <div className={styles.description}>{item.summary}</div>
          <div className={styles.extra}>
            {item.time}
            <Divider type="vertical" />
            <span>
              {item.tags.map(tag => (
                <Tag key={tag}>{tag}</Tag>
              ))}
            </span>
          </div>
        </div>
      </List.Item>
    )}
  />
);

export default ArticleList;
